<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐推荐</title>
    <link rel="stylesheet" href="style/music.css">
</head>
<body> 
   <div class="main-content">
        <div class="box-back">
            <img src="pic/back.png" onclick="backHome()">
        </div>
        <div class="box-player">
            <div class="cd-image pause"></div>
            <div class="music-info">
                <div class="music-name">藍二乘</div>
                <div class="music-artist">ヨルシカ</div>
            </div>
            <div id="progressBar" onclick="changeProgress(event)">
                <div id="progress"></div>
            </div>
            <div class="time-sound">
                <input type="range" min="0" max="1" step="0.01" value="1" oninput="setVolume(this.value)">
                <div class="time">00:00/00:00</div>
            </div>
            <audio id="myAudio" src="music/yorushika_藍二乘.mp3"></audio>
            <div class="buttons">
                <div class="button left" onclick="toPrevMusic()"></div>
                <div class="button play-button" onclick="playPause()"></div>
                <div class="button right" onclick="toNextMusic()"></div>
            </div>
        </div>
   </div>
   <script src="script/music.js"></script>
</body>
</html>